<template>
  <!--
      思路
      供应商 与分销商状态节点
      未注册(提示注册语)，
      注册提交等待中(提示等待)，
      注册成功(展示正常的菜单) ，
      注册失败 (状态从接口获取) 提示重新注册
-->
  <div class="new-dashboard" v-if="type==1 || type ==2">
    <template >
      <div class="supplier-tips" v-show="(auditStatuse ==null || auditStatuse ==-1 || auditStatuse==0) && (rigs==false)">
        您好，<span style="color:red;">{{ userInfo.userName }}!  </span>
        <span v-show="type==1">成为供应商还需要完善入驻资料</span>
        <span v-show="type==2">成为分销商还需要完善入驻资料</span>
        <br>
        <br>
        <a-button type="primary" @click="editInfo"> 马上填写</a-button>
      </div>

      <div class="supplier-tips" v-show="auditStatuse ==2  && type==1">
        <p>提交成为供应商的资料还在审核中，请耐心等待。</p>
      </div>
      <div class="supplier-tips" v-show="auditStatuse ==2 && type==2">
        <p>提交成为分销商的资料还在审核中，请耐心等待。</p>
      </div>

      <div class="supplier-tips" v-show="(auditStatuse==3 || auditStatuse==4) &&(rigs ==false) && (type==1)">
        <p>您提交的入驻资料有误，请修改后重新提交，<span @click="editInfo($event)">重新填写资料>></span></p>
      </div>
      <div class="supplier-tips" v-show="(auditStatuse==3 || auditStatuse==4) &&(rigs ==false) &&(type==2)">
        <p>您提交的入驻资料有误，请修改后重新提交，<span @click="editInfo($event)">重新填写资料>></span></p>
      </div>

      <div class="supplier-tips" v-show="rigs">
        <a-form-model ref="ruleForm"
                      style="width: 800px"
                      :model="formData"
                      :rules="rules"
                      :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                      :wrapper-col="{ lg: { span: 15 }, sm: { span: 15 } }">
          <!--分销商与供应商只有一个名字不一样其他数据相同-->
          <template v-if="type==1">
            <a-form-model-item label="公司名称" prop="supplierName">
              <a-input
                v-model="formData.supplierName"
                :maxLength="50"
                name="supplierName"
                placeholder="最多50位"
              />
            </a-form-model-item>
          </template>

          <template v-if="type==2">
            <a-form-model-item label="公司名称" prop="companyName">
              <a-input
                v-model="formData.companyName"
                :maxLength="50"
                name="supplierName"
                placeholder="最多50位"
              />

            </a-form-model-item>
          </template>


          <a-form-model-item label="企业证件类型" prop="enterpriseIdentificationType">
            <a-select
              v-model="formData.enterpriseIdentificationType"
              :options="enterpriseIdentificationTypeList"
            >
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="企业证件号码" prop="enterpriseIdentificationNumber">
            <a-input
              v-model="formData.enterpriseIdentificationNumber"
              :maxLength="32"
              name="enterpriseIdentificationNumber"
              placeholder="最多50位"
            />
          </a-form-model-item>

          <a-form-model-item label="企业对公账号" prop="bankCardNum">
            <a-input
              v-model="formData.bankCardNum"
              :maxLength="32"
              name="bankCardNum"
              placeholder="最多32位"
            />
          </a-form-model-item>

          <a-form-model-item label="开户银行" prop="bankOpenId">
            <a-select
              style="width: 250px"
              show-search
              v-model="formData.bankOpenId"
              placeholder="请选择或输入开户银行"
              option-filter-prop="children"
              :filter-option="filterOption"
              @change="changeBankOpenName">
              <a-select-option v-for="item in bankOpenNameList"
                               :key="item.value"
                               :value="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-model-item>


          <a-form-model-item label="企业预留经办人手机号" prop="enterpriseOperatorPhone">
            <a-input
              v-model="formData.enterpriseOperatorPhone"
              :maxLength="11"
              name="enterpriseOperatorPhone"
              placeholder="最多32位"
            />
          </a-form-model-item>


          <a-form-model-item label="组织机构代码" prop="organizationCode">
            <a-input
              v-model="formData.organizationCode"
              :maxLength="32"
              name="organizationCode"
              placeholder="最多32位"
            />
          </a-form-model-item>

          <a-form-model-item label="法人姓名" prop="legalPersonName">
            <a-input
              v-model="formData.legalPersonName"
              :maxLength="32"
              name="legalPersonName"
              placeholder="最多32位"
            />
          </a-form-model-item>


          <a-form-model-item label="法人性别" prop="legalPersonSex">
            <a-radio-group v-model="formData.legalPersonSex">
              <a-radio :value="0">男</a-radio>
              <a-radio :value="1">女</a-radio>
            </a-radio-group>
          </a-form-model-item>

          <a-form-model-item label="法人证件类型" prop="legalCertificateType">
            <a-select
              v-model="formData.legalCertificateType"
              :options="legalCertificateTypeList" >
            </a-select>
          </a-form-model-item>



          <a-form-model-item label="法人证件号码" prop="legalCertificateNumber">
            <a-input
              v-model="formData.legalCertificateNumber"
              :maxLength="32"
              name="legalCertificateNumber"
              placeholder="最多32位"
            />
          </a-form-model-item>

          <a-form-model-item label="企业电子邮箱" prop="legalCertificateEmail">
            <a-input
              v-model="formData.legalCertificateEmail"
              :maxLength="32"
              name="legalCertificateEmail"
              placeholder="最多32位"
            />
          </a-form-model-item>

          <a-form-model-item label="经营范围" prop="businessScope">
            <a-select
              v-model="formData.industry"
              :options="industryList" >
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="审核状态" prop="" class="fzcolor">
            <div>{{formData.status}}</div>
          </a-form-model-item>

          <a-form-model-item label="审核备注" prop="" class="fzcolor">
            <div>{{formData.note}}</div>
          </a-form-model-item>

          <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button type="primary"
                      @click="handleSubmit">提交</a-button>
            <a-button style="margin-left: 8px" @click="backPreStep">返回</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </template>
    <div class="default2" v-show="(type == 1 || type == 2) && auditStatuse !==1 && rigs==false">
      <img src="~@images/bg.png" alt="">
    </div>
  </div>


  </template>

<script>
  import { mapGetters } from "vuex";
  import deepCopy from "@/utils/deepCopy";
  import regex from "@/utils/regex";

  export default {
    props:{
      id:{
        type:String,
        default:''
      },
      types:{
        type:[String,Number]
      },
      auditStatuses:{
        type:[String,Number]
      }
    },
    created() {
      // this.getInfo()
      this.getBankOpenNameList()
    },
    watch:{
      id(newValue,oldValue){
        console.log(newValue)
        this.formData.id = newValue

      },
      types(newValue,oldValue){
        console.log(newValue)
        this.type = newValue
      },
      auditStatuses(newValue,oldValue){
        console.log(newValue)
        this.auditStatuse = newValue
      }
    },

    mounted() {
      console.log('用户信息',this.userInfo)
    },
    computed: {
      ...mapGetters(["userInfo", "dictAll"]),
    },

    data() {
      return {
        //step 控制页面显示情况

        // type :1供应商 2 分销商
        type:null,
        // 用户状态 0待审核  1审核成功  2等待人工审核  3 人工审核失败(信息有问题)  4人工审核失败(照片有问题)
        // 同时用户页面显示情况
        auditStatuse: null,

        enterpriseIdentificationTypeList:[
          { label:'营业执照', value:1 },
          { label:'其他主体资格证明文件', value:2 }
        ],
        legalCertificateTypeList:[
          { label:'身份证', value:1 },
        ],
        industryList:[
          { label:'农、林、牧、渔业', value:"A" },
          { label:'采矿业', value:"B" },
          { label:'制造业', value:"C" },
          { label:'电力、热力、燃气及水生产和供应业', value:"D" },
          { label:'建筑业', value:"E" },
          { label:'批发和零售业', value:"F" },
          { label:'交通运输、仓储和邮政业', value:"G" },
          { label:'住宿和餐饮业', value:"H" },
          { label:'信息传输、软件和信息技术服务业', value:"I" },
          { label:'金融业', value:"J" },
          { label:'房地产业', value:"K" },
          { label:'租赁和商务服务业', value:"L" },
          { label:'科学研究和技术服务业', value:"M"},
          { label:'水利、环境和公共设施管理业', value:"N" },
          { label:'居民服务、修理和其他服务业', value:"O" },
          { label:'教育', value:"P" },
          { label:'卫生和社会工作', value:"Q" },
          { label:'文化、体育和娱乐业', value:"R" },
          { label:'公共管理、社会保障和社会组织', value:"S" },
          { label:'国际组织', value:"T" },


        ],
        bankOpenNameList: [],

        formData:{
          id:'', //供应商编码
          supplierName:'', //供应商公司名称
          companyName:'', //分销商公司名称
          enterpriseIdentificationType:'',          // 企业证件类型(1营业执照,2其他主体资格证明文件)
          enterpriseIdentificationNumber:'',        //	企业证件号码
          bankCardNum:"" ,                          // 企业对公账号
          bankOpenId :'' ,                          // 开户银行编码

          bankOpenName:'',                           //开户银行
          enterpriseOperatorPhone:'',                //企业预留经办人手机号
          organizationCode:"",                       //组织机构代码
          legalPersonName	:"",                          //	法人姓名
          legalPersonSex:0,                            //  (0男，1女)
          legalCertificateType:"",                      //  法人证件类型(1:身份证号)
          legalCertificateNumber:"",                    //  法人证件号码
          legalCertificateEmail:"",                     //	法人邮箱
          industry:"",                           	      //  经营范围
          returnUrl:"https://www.baidu.com" ,          //  返回地址
          status:"",
          note:''
        },
        rules:{
          supplierName: [{ required:true, message:'请填写公司名称'}],
          enterpriseIdentificationType: [{ required: true, message: '请选择企业证件类型' }],
          enterpriseIdentificationNumber:[{ required: true, message: '请输入企业证件号码' }],
          bankCardNum: [{ required: true, message: '请输入企业对公账号' }],
          bankOpenId:[{ required: true, message: '请选择开户银行' }],
          enterpriseOperatorPhone:[{ required: true, message: '请输入企业预留经办人手机号' }, {}],

        },
        // 国际银行注册链接
        href:'',
        // 注册表单是否显示
        rigs:false
      }
    },
    methods:{
      // 获取当前用户 的国际银行注册情况
/*      getInfo(){
        //  分销商与供应商 相同接口吗
        this.$get('/distributor/registStatus').then(res => {
          if (res && res.returnCode === 1000) {
            // console.log("=========:",res)
            this.formData.id = res.dataInfo.id
            this.type = res.dataInfo.type
            this.auditStatuse = res.dataInfo.auditStatuse

          }
        })
      },*/


      editInfo(e) {
        console.log(e)

        /*if (this.auditStatuse ==3 ||this.auditStatuse ==4){

        }*/
        this.getshopInfo()
        this.rigs = true

        // this.auditStatuse = 10
      },


      getBankOpenNameList() {
        this.$get(`/bank/information/list`, {}).then(res => {
          if (res && res.returnCode === 1000 && res.dataInfo && res.dataInfo.length) {
            this.bankOpenNameList = res.dataInfo.map(item => {
              item.label = item.bankName
              item.value = item.id
              return item
            })
          }
        }).catch(err=> {
          this.bankOpenNameList = []
        })
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.indexOf(input) >= 0
        );
      },
      changeBankOpenName(val) {
        this.formData.bankOpenName = this.bankOpenNameList.filter(item => item.value == val)[0].label
      },


      handleSubmit(){
        console.log(this.formData)
        // 入驻国际银行
        // 提交最后要到第1步
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {

            let url =  this.type ==1 ? '/supplier/inBank' :'/distributor/inBank'
            this.$post(url, {...this.formData}).then(res => {
              if (res && res.returnCode === 1000) {
                console.log(res)
                this.href = res.dataInfo
                // this.$message.success('保存成功！')
                this.aclickTo()
                // 等待页面
                // this.auditStatuse = 1
              }
            })
          } else {
            console.log('error!!');
            return false;
          }
        });


      },
      backPreStep(){
        /* if ( this.auditStatuse == -1){

         }*/
        this.rigs = false
      },
      // 动态创建a标题跳往国际银行注册页面
      aclickTo(){
        var a = document.createElement('a');
        a.setAttribute('href', this.href);
        // a.setAttribute('target', '_blank');
        document.body.appendChild(a);
        a.click();
      },
      // 获取分销商 || 供应商的全部信息
      getshopInfo(){
        let url ;

        if (this.type==1){
          url ='/supplier/id'
        }

        if (this.type==2){
          url ='/distributor/id'
        }

        this.$get(url,{id:this.formData.id}).then((res)=>{
          if (res&&res.returnCode ==1000){
            this.formData = deepCopy(res.dataInfo)
            this.formData.returnUrl = "https://www.baidu.com"
            if (this.auditStatuse ===3){
              this.formData.note =  '人工审核失败(信息有误)'
              this.formData.status = "未通过"
            }
            if (this.auditStatuse ===4){
              this.formData.note =  '人工审核失败(照片问题）)'
              this.formData.status = "未通过"
            }
            console.log(this.formData)
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .new-dashboard{
    display: flex;
    align-items: center;
    flex-direction: column;
    .milky{
      font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
      text-transform: uppercase;
      display: block;
      font-size: 92px;
      color: #f1ebe5;
      text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
      font-weight: bold;
      letter-spacing: -4px;
      text-align: center;
      background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
      padding: 50px 100px 120px;
      margin-top: 100px;
      margin-bottom: 130px;
      border-radius: 20px;
      .welcome{
        font-size: 72px;
      }
    }
    .default{
      margin: 100px 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 800px;
      }
    }
    .default2{
      margin: 100px 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 700px;
      }
    }
    .supplier-tips{
      margin-top: 20px;
      p{
        font-size: 16px;
        span{
          color: #1890ff;
        }
        &.supplier-name{
          font-size: 20px;
          margin-bottom: 10px;
          span{
            color: red;
          }
        }
      }
    }
  }
  .fzcolor{
    color:red;
  }
</style>
